<template>
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <SearchBox @search="search">

        <div class="common-search-item">
          <div class="label">承租户:</div>
          <div class="input">
            <el-select v-model="lesseeNo" filterable clearable @change="lesseeObj">
              <el-option
                v-for="item in lesseeList"
                :key="item.lesseeNo"
                :label="item.lesseeName"
                :value="item.lesseeNo"
              />
            </el-select>
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">设施组:</div>
          <div class="input">
            <el-select
              v-model="facilityGroupNo"
              placeholder="请选择设施组"
              clearable
              filterable
              @change="facilityGroupChange"
            >
              <el-option
                v-for="item in facilityGroupArr"
                :key="item.facilityGroupNo"
                :label="item.facilityGroupName"
                :value="item.facilityGroupNo"
              />
            </el-select>
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">设施:</div>
          <div class="input">
            <el-select
              v-model="facilityNo"
              filterable
              placeholder="请选择设施"
              clearable
              @change="facilityChange"
            >
              <el-option
                v-for="item in facilityArr"
                :key="item.facilityNo"
                :value="item.facilityNo"
                :label="item.facilityName"
              />
            </el-select>
          </div>
        </div>
        <!-- <div class="common-search-item">
          <div class="label">经纬度:</div>
          <div class="input">
            <el-input v-model="center.lng" /><el-input v-model="center.lat" />
          </div>
        </div> -->
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <baidu-map
        class="map"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        map-type="BMAP_HYBRID_MAP"
      >
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <!--
        @click="setCenterPoint"
           <bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label content="点位" :label-style="{color: 'red', fontSize : '14px'}" :offset="{width: -35, height: 30}" />
        </bm-marker> -->
        <!-- :styles="[
            {
              textColor: '#fff'
            }
          ]" -->
        <BmlMarkerClusterer :average-center="true">
          <bm-marker
            v-for="(item, index) in groupLngLatArr"
            :key="index + 9999999999"
            :position="{
              lng: item.center.lng - 0.000003,
              lat: item.center.lat - 0.000043,
            }"
            :dragging="false"
          >
            <bm-label
              :content="item[0].title.facilityName"
              :label-style="labelStyle"
              :offset="{ width: -5, height: 15 }"
              @click="infoMultipleOpen(item)"
            />
          </bm-marker>
        </BmlMarkerClusterer>
        <bm-info-window
          :position="{ lng: lngLatCore.lng, lat: lngLatCore.lat }"
          :show="infoWindow.show"
          @close="infoWindowClose"
        >
          <span class="BMap_bubble_title">设施信息</span>
          <p><span>设施类型:</span> {{ lngLatArrform.facilityTypeName }}</p>
          <p><span>设施组:</span> {{ lngLatMultipleform.groupName }}</p>
          <p><span>设施名称:</span> {{ lngLatArrform.facilityName }}</p>
          <p><span>承租户:</span> {{ lngLatArrform.lesseeName }}</p>
          <p><span>农业类型:</span> {{ lngLatArrform.farmingTypeName }}</p>
          <!-- <p><span>主要种养品种:</span> {{ lngLatArrform.plantingTypeName }}</p> -->
          <p><span>地址:</span> {{ lngLatArrform.address }}</p>
          <p><span>面积: </span> {{ lngLatArrform.scope }} 亩</p>
        </bm-info-window>
        <bm-polygon
          :path="lngLatArr"
          stroke-color="#ffdb5c"
          fill-color="#ffdb5c"
          :stroke-opacity="1"
          :fill-opacity="0.4"
          :stroke-weight="3"
          :editing="jkedit"
          @click="infoWindowOpen(lngLatArr)"
          @mouseout="infoWindowOot"
        />
        <div v-for="(item, index) in groupLngLatArr" :key="index">
          <bm-polygon
            :path="item"
            stroke-color="#03F5EC"
            fill-color="#00fff6"
            :stroke-opacity="1"
            :fill-opacity="0.2"
            :stroke-weight="3"
            :editing="jkedit"
            @click="infoMultipleOpen(item)"
            @mouseout="infoMultipleOot"
          />
        </div>
        <bm-info-window
          :position="{
            lng: lngLatMultipleCore.lng,
            lat: lngLatMultipleCore.lat,
          }"
          :show="infoMultiple.show"
          @close="infoMultipleClose"
        >
          <span class="BMap_bubble_title">设施信息</span>
          <p>
            <span>设施类型:</span> {{ lngLatMultipleform.facilityTypeName }}
          </p>
          <p><span>设施组:</span> {{ lngLatMultipleform.groupName }}</p>
          <p><span>设施名称:</span> {{ lngLatMultipleform.facilityName }}</p>
          <p><span>承租户:</span> {{ lngLatMultipleform.lesseeName }}</p>
          <!-- <p><span>农业类型:</span> {{ lngLatMultipleform.farmingTypeName }}</p> -->
          <p>
            <span>主要种养品种:</span>
            {{ lngLatMultipleform.plantingTypeName }}
          </p>
          <p><span>地址:</span> {{ lngLatMultipleform.address }}</p>
          <p><span>面积: </span>{{ lngLatMultipleform.scope }} 亩</p>
        </bm-info-window>
      </baidu-map>
    </template>
  </BaseMainSlot>
</template>

<script>
import landgroupInfoManage from "@/api/digital-operation/land-manage/land-group-manage";
import divideInfoManage from "@/api/digital-operation/land-manage/divide-manage";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import tenantInfo from "@/api/digital-operation/tenant-manage/tenant-info/index";
import { mymixin } from "@/utils/mixin";
import SearchBox from "@/components/SearchBox";
import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
  name: "DivideInfo",
  components: {
    BaseMainSlot,
    SearchBox,
    BmlMarkerClusterer
  },
  mixins: [mymixin],
  data() {
    return {
      // 是否可修改
      jkedit: false,
      // 地图相关值
      center: { lng: 120.230648, lat: 30.811543 },
      zoom: 17,
      keyword: "",
      polyline: {
        editing: false,
        paths: []
      },
      groupLngLatArr: [],
      // 经纬度数组
      lngLatArr: [],
      // 设施数组
      facilityArr: [],
      // 设施组数组
      facilityGroupArr: [],
      input2: "",
      facilityNo: "", // 查询条件设施ID
      facilityGroupNo: "", // 查询条件设施组Id
      infoWindow: {
        show: false
      },
      labelStyle: {
        color: "#fffff0",
        fontSize: "12px",
        borderRadius: "8px",
        border: "none",
        backgroundColor: "#00a1c2",
        padding: "3px",
        opacity: ".8",
        letterSpacing: "2px",
        transform: "translateX(-32%)"
      },
      lesseeList: [],
      lesseeNo: "",
      lngLatArrform: {},
      lngLatCore: {},
      infoMultiple: {
        show: false
      },
      facilityGName: "",
      lngLatMultipleform: {},
      lngLatMultipleCore: {}
    };
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      // 条件查询所有设施组信息
      this.queryFacilityGroupList();
      // 条件查询所有设施信息
      this.getFacilityListByConditionAll();
      // 查询所有设施信息
      this.FacilityPointList();
      this.querylesseeList()
    });
  },
  created() {
    if (sessionStorage.organizationNo === "WUSHI") {
      // this.center = { lng: 119.775106, lat: 30.978951 }
      // this.$set(this.center, 'lng', 120.340248)
      // this.$set(this.center, 'lat', 30.898158)
    }
  },
  // beforeDestroy() {
  //   if (this.timer) {
  //     clearInterval(this.timer);
  //   }
  // },
  methods: {
    startVal(e) {
      // console.log(e)
    },
    endVal(e) {
      // console.log(e)
    },
    lesseeObj(e) {
      this.queryFacilityGroupList(e)
      this.getFacilityListByConditionAll()
    },
    // 信息窗体
    infoWindowClose(e) {
      this.infoWindow.show = false;
    },
    infoWindowOpen(e) {
      if (e) {
        this.lngLatCore = this.getCenterPoint(e);
        this.lngLatArrform = Object.assign(e[0].title);
        setTimeout(() => {
          this.infoWindow.show = true;
          // this.getdatatime()
        }, 100);
      }
    },
    infoWindowOot(e) {
      this.infoWindow.show = false;
    },
    // 信息窗体
    infoMultipleClose(e) {
      this.infoMultiple.show = false;
    },
    infoMultipleOpen(e) {
      if (e) {
        // this.lngLatMultipleform = e
        this.lngLatMultipleCore = this.getCenterPoint(e);
        this.lngLatMultipleform = Object.assign(e[0].title);
        // console.log(this.lngLatMultipleCore);
        // console.log(this.lngLatMultipleform);
        setTimeout(() => {
          this.infoMultiple.show = true;
          // this.getdatatime()
        }, 100);
      }
    },
    infoMultipleOot(e) {
      this.infoMultiple.show = false;
    },
    // 条件查询所有设施组信息
    async queryFacilityGroupList(e) {
      const { data: res } = await landgroupInfoManage.getfacilityGroupAll({ lesseeNo: e || undefined });
      this.facilityGroupArr = res;
    },
    async querylesseeList() {
      // 获取承租人下拉框
      const { data: lessee } = await tenantInfo.queryLessesByCondition();
      this.lesseeList = lessee;
    },
    // 条件查询所有设施信息
    async getFacilityListByConditionAll() {
      let params = {
        facilityStatus: false,
        lesseeNo: this.lesseeNo
      };
      const { data: resp } =
        await divideInfoManage.getFacilityListByConditionAll(params);
      this.facilityArr = resp;
    },
    // 查询所有设施信息
    async FacilityPointList() {
      const { data: resp } = await divideInfoManage.queryAllFacilityDetail();
      // let facilityNameArr = resp;
      // console.log(resp)
      this.groupLngLatArr = [];
      let list = [];
      list = resp;
      this.facilityArr = resp;
      let lngLatAll = [];
      list.forEach((itemthree) => {
        if (itemthree.facilityPointList) {
          let lngLatArr = [];
          let facilityGroupArr = itemthree.facilityPointList;
          facilityGroupArr.forEach((item) => {
            const obj = {};
            obj["lng"] = item.axisY;
            obj["lat"] = item.axisX;
            obj["title"] = itemthree;
            lngLatArr.push(obj);
            lngLatAll.push(obj);
          });
          this.groupLngLatArr.push(lngLatArr);
          this.groupLngLatArr.forEach((item) => {
            item["center"] = this.getCenterPoint(item);
          });
          // console.log(this.groupLngLatArr);
          // lngLatAll = this.groupLngLatArr[0] || [];
        }
      });
      let center = this.getCenterPoint(lngLatAll);
      // setTimeout(() => {
      if (lngLatAll.length) {
        this.$nextTick(() => {
          this.center = {
            lng: center.lng || 120.230648,
            lat: center.lat || 30.811543
          };
          if (this.groupLngLatArr.length >= 100) {
            this.zoom = 16;
            this.labelStyle.fontSize = "12px";
          } else if (
            this.groupLngLatArr.length >= 60 &&
            this.groupLngLatArr.length < 100
          ) {
            this.zoom = 17;
            this.labelStyle.fontSize = "12px";
          } else if (
            this.groupLngLatArr.length >= 15 &&
            this.groupLngLatArr.length < 60
          ) {
            this.zoom = 18;
            this.labelStyle.fontSize = "14px";
            this.labelStyle.transform = "translateX(-15%)";
          } else if (this.groupLngLatArr.length < 15) {
            this.zoom = 18;
            this.labelStyle.fontSize = "16px";
            this.labelStyle.transform = "translateX(0%)";
          }
        });
      } else {
        const { data: onInfo } =
          await divideInfoManage.queryonInfoByCondition();
        // console.log(onInfo)
        if (onInfo) {
          this.$set(this.center, "lng", onInfo.longitude);
          this.$set(this.center, "lat", onInfo.latitude);
        }
      }
      // }, 400);
      // console.log(this.list)
    },
    setCenterPoint({ type, target, point, pixel, overlay }) {
      this.center.lng = point.lng;
      this.center.lat = point.lat;
      // this.formData.latitude = point.lat;
      // this.formData.longitude = point.lng;
    },
    // 设施组下拉框改变时
    async facilityGroupChange(val) {
      if (!val) {
        this.groupLngLatArr = [];
        this.infoWindow.show = false;
        this.infoMultiple.show = false;
        this.lngLatArr = [];
        this.facilityNo = "";
        this.search();
        this.getFacilityListByConditionAll();
        return;
      }
      this.groupLngLatArr = [];
      this.lngLatArr = [];
      this.infoWindow.show = false;
      this.infoMultiple.show = false;
      const { data: resp } = await landgroupInfoManage.queryFacilityGroup(val);
      let facilityGroupArr = resp;
      if (facilityGroupArr) {
        let facilityG = [];
        facilityGroupArr.forEach((itemthree) => {
          if (itemthree.facilityPointList) {
            facilityG.push(itemthree);
          }
          // if (itemthree.groupName) {
          //   this.facilityGName = itemthree.groupName
          // }
        });
        if (facilityG.length > 0) {
          let lngLatAll = [];
          facilityG.forEach(async (itemthree) => {
            let facilityPointList = itemthree.facilityPointList;
            // 获取 百度地图 经纬度
            let lngLatArr = [];
            facilityPointList.forEach((item) => {
              const obj = {};
              obj["lng"] = item.axisY;
              obj["lat"] = item.axisX;
              obj["title"] = itemthree;
              lngLatArr.push(obj);
              lngLatAll.push(obj);
            });
            this.groupLngLatArr.push(lngLatArr);
            this.groupLngLatArr.forEach((item) => {
              item["center"] = this.getCenterPoint(item);
            });
          });
          let center = this.getCenterPoint(lngLatAll);
          //  this.groupLngLatArr[0];
          // console.log(lngLatAll)
          // setTimeout(() => {
          if (lngLatAll.length) {
            this.$nextTick(() => {
              this.center = {
                lng: center.lng,
                lat: center.lat
              };
              if (this.groupLngLatArr.length > 100) {
                this.zoom = 16;
                this.labelStyle.fontSize = "12px";
              } else if (
                this.groupLngLatArr.length > 60 &&
                this.groupLngLatArr.length < 100
              ) {
                this.zoom = 17;
                this.labelStyle.fontSize = "14px";
              } else if (
                this.groupLngLatArr.length > 30 &&
                this.groupLngLatArr.length < 60
              ) {
                this.zoom = 18;
                this.labelStyle.fontSize = "16px";
                this.labelStyle.transform = "translateX(-15%)";
              } else if (this.groupLngLatArr.length < 30) {
                this.zoom = 19;
                this.labelStyle.fontSize = "18px";
                this.labelStyle.transform = "translateX(0%)";
              }
            });
          }
          // }, 200);
        } else {
          this.$message.warning("暂无设施组信息");
        }
      }
      if (val) {
        this.facilityNo = "";
        this.facilityArr = facilityGroupArr;
      }
    },
    // 设施下拉框改变时
    async facilityChange(val) {
      if (!val) {
        this.lngLatArr = [];
        this.infoWindow.show = false;
        this.infoMultiple.show = false;
        this.search();
        return;
      }
      this.lngLatArr = [];
      this.infoWindow.show = false;
      this.infoMultiple.show = false;
      const { data: res } = await divideInfoManage.queryFacilityById(val);
      let facilityPointList = res.facilityPointList;
      if (facilityPointList !== undefined) {
        facilityPointList.forEach((item) => {
          const obj = {};
          obj["lng"] = item.axisY;
          obj["lat"] = item.axisX;
          obj["title"] = res;
          // obj["title"]['groupName'] = this.facilityGName || ''
          this.lngLatArr.push(obj);
        });
        // this.lngLatArr.forEach(item => {
        //   item["center"] = this.getCenterPoint(item)
        // })
        this.$nextTick(() => {
          this.center = {
            lng: this.lngLatArr[0].lng,
            lat: this.lngLatArr[0].lat
          };
        });
      } else {
        return this.$message.warning("暂无设施信息");
      }
    },
    // 计算多边形中心点
    getCenterPoint(data) {
      let lng = 0.0;
      let lat = 0.0;
      // console.log(data)
      for (let point of data) {
        // console.log(point)
        lat += JSON.parse(point["lat"]);
        lng += JSON.parse(point["lng"]);
      }
      lng = lng / data.length + 0.000084;
      lat = lat / data.length + 0.000014;
      // console.log(lng, lat, data.length + 0.000084, data.length + 0.000014);
      return { lng: lng, lat: lat };
    },
    async search() {
      this.currentPage = 1;
      if (!this.facilityGroupNo && !this.facilityNo) {
        await this.FacilityPointList();
      } else {
        if (this.facilityNo) {
          this.facilityChange(this.facilityNo);
        } else if (this.facilityGroupNo) {
          this.facilityGroupChange(this.facilityGroupNo);
        } else {
          this.facilityChange(this.facilityNo);
          this.facilityGroupChange(this.facilityGroupNo);
        }
      }
    }
    // getdatatime() {
    //   let that = this;
    //   this.timer = setInterval(() => {
    //     // that.getdatatime(); // 声明一个变量指向Vue实例this，保证作用域一致
    //   }, 1000);
    // }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.map {
  height: 100%;
  ::v-deep > div {
    > div {
      > div:nth-child(2) {
        > div:nth-child(2) {
          > div {
            color: aliceblue !important;
          }
        }
      }
    }
  }
}

::v-deep .label {
  text-align: end;
  padding: 0 10px;
}
/*地图标题*/
::v-deep .BMap_bubble_title {
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  padding-left: 5px;
  padding-top: 5px;
}
::v-deep {
  .BMap_bubble_content {
    > div:nth-child(2) {
        > div:nth-child(2) {
          display: none;
        }
      }
  }
}
/* 消息内容 */
// ::v-deep .BMap_bubble_content {
// 	background-color:white;
// 	padding-left:5px;
// 	padding-top:5px;
// 	padding-bottom:10px;
// }
/* 内容 */
::v-deep .BMap_pop div:nth-child(9) {
  top: 35px !important;
  border-radius: 7px;
}
/* 左上角删除按键 */
::v-deep .BMap_pop img {
  top: 40px !important;
  left: 5555px !important;
}
::v-deep .BMap_top {
  display: none;
}
::v-deep .BMap_bottom {
  display: none;
}
::v-deep .BMap_center {
  display: none;
}
/* 隐藏边角 */
::v-deep .BMap_pop {
  div:nth-child(1) div {
    display: none;
  }
  div:nth-child(4) {
    display: none;
  }
  div:nth-child(3) {
    display: none;
  }
  div:nth-child(5) {
    display: none;
  }
  div:nth-child(7) {
    display: none;
  }
  // div:nth-child(8) {
  // // background: cadetblue;
  // // height: 70px !important;
  // }
  //  div:nth-child(8)>img {
  // // display:none;
  // }
  .BMap_bubble_content {
    background-color: rgb(255, 255, 255);
    padding: 10px 10px;
    p {
      display: flex;
      span {
        min-width: 100px;
        // text-align: end;
      }
    }
  }
}
::v-deep .BMap_cpyCtrl {
  display: none;
}
::v-deep .BMap_shadow {
  display: none;
}
::v-deep .anchorBL {
  display: none;
}
::v-deep .BMap_Marker {
  div {
    display: none;
  }
}
::v-deep .BMap_noprint {
  display: block;
}
::v-deep .BMap_cpyCtrl {
  display: none;
}
::v-deep .map {
  > div:first-child {
    > div:first-child {
      > div:nth-child(2) {
        div:nth-last-child(3) {
          display: none;
        }
      }
    }
  }
}
</style>
